<!DOCTYPE html>
<d-layout class="layout-wrapper">
  <d-header>
    <d-tag [tag]="job?.jobType?.label" [labelStyle]="'tag-custom'"></d-tag>
    <d-tag [tag]="job?.jobCode + ' - ' + job?.jobName" [labelStyle]="'blue-w98'"></d-tag>
  </d-header>
  <d-layout>
    <d-content>
      <d-splitter class="splitter-border" [orientation]="orientation" style="height: 100%">
        <d-splitter-pane [size]="size" [minSize]="minSize" [maxSize]="maxSize" [collapsible]="false">
          <div class="pane-content">
            <d-search (searchFn)="onSearch($event)" class="search-box"></d-search>
            <d-accordion
              [data]="menu"
              class="menu"
              [restrictOneOpen]="false"
              [accordionType]="'embed'"
              [menuItemTemplate]="menuItemTemplate"
              [itemTemplate]="itemtemplate"
            ></d-accordion>
          </div>
        </d-splitter-pane>
        <d-splitter-pane minSize="100%">
          <div class="pane-content">
            <div class="toolbar">
              <d-row [dGutter]="[12, 0]">
                <d-col>
                  <div class="btn-group">
                    <d-button
                      icon="icon-property"
                      bsStyle="text"
                      bsSize="lg"
                      title="{{ 'datadev.workbench.propertity' | translate }}"
                      style="padding-right: 4px"
                      (btnClick)="openJobPropertityDialog()"
                    ></d-button>
                    <d-button
                      icon="icon-save"
                      bsStyle="text"
                      bsSize="lg"
                      title="{{ 'datadev.workbench.save' | translate }}"
                      style="padding-right: 4px"
                      (btnClick)="saveGraph(false)"
                    ></d-button>
                    <d-button
                      icon="icon-publish"
                      bsStyle="text"
                      bsSize="lg"
                      title="{{ 'datadev.workbench.publish' | translate }}"
                      style="padding-right: 4px"
                      (btnClick)="publishJob()"
                    ></d-button>
                  </div>
                </d-col>
                <d-col style="width: 100px">
                  <d-select
                    title="{{ 'datadev.workbench.zoom' | translate }}"
                    [options]="zoomOptions"
                    [overview]="'underlined'"
                    name="graphZoomSize"
                    [filterKey]="'label'"
                    (valueChange)="zoomTo()"
                    [(ngModel)]="zoomOptionSize"
                  >
                  </d-select>
                </d-col>
              </d-row>
            </div>
            <div class="container">
              <div class="mainContainer" id="mainContainer" #mainContainer></div>
              <div class="menuContainer" #menuContainer>
                <ul>
                  <li class="contextmenu-item" *ngIf="currentCell?.shape != 'edge'">
                    <d-button bsStyle="text" (btnClick)="editNode()">{{ 'datadev.workbench.menu.edit' | translate }}</d-button>
                  </li>
                  <li class="contextmenu-item">
                    <d-button bsStyle="text" (btnClick)="deleteCell()">{{ 'datadev.workbench.menu.delete' | translate }}</d-button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </d-splitter-pane>
      </d-splitter>
    </d-content>
  </d-layout>
</d-layout>

<ng-template #menuItemTemplate let-item="item">
  <em [class]="item.menuIcon" style="margin-right: 8px"></em> {{ item.title | translate }}
</ng-template>
<ng-template #itemtemplate let-item="item">
  <d-button
    [icon]="item.menuIcon"
    bsStyle="text"
    [attr.menuType]="item.menuType"
    [attr.menuName]="item.menuName"
    (mousedown)="dragNode($event)"
  >
    {{ item.title | translate }}
  </d-button>
</ng-template>
